<template>
  <div class="app-container">
    <h1>学生考试界面</h1>
    <p>倒计时：{{ hour }}:{{ minute }}:{{ second }}</p>
    <div v-for="(item) in title.one_select">
      <h4><span>{{ item.number }}</span>({{ item.score }}分) {{ item.title }}</h4>
      <input v-model="answer[item.number-1].answer[0]" type="radio" value="A"><label>A {{ item.opt1 }}</label>
      <input v-model="answer[item.number-1].answer[0]" type="radio" value="B"><label>B {{ item.opt2 }}</label>
      <input v-model="answer[item.number-1].answer[0]" type="radio" value="C"><label>C {{ item.opt3 }}</label>
      <input v-model="answer[item.number-1].answer[0]" type="radio" value="D"><label>D {{ item.opt4 }}</label>
    </div>
    <div v-for="(item) in title.multi_select">
      <h4><span>{{ item.number }}</span>({{ item.score }}分) {{ item.title }}</h4>
      <input v-model="answer[item.number-1].answer[0]" type="checkbox" value="1"><label>A {{ item.opt1 }}</label>
      <input v-model="answer[item.number-1].answer[1]" type="checkbox" value="2"><label>B {{ item.opt2 }}</label>
      <input v-model="answer[item.number-1].answer[2]" type="checkbox" value="3"><label>C {{ item.opt3 }}</label>
      <input v-model="answer[item.number-1].answer[3]" type="checkbox" value="4"><label>D {{ item.opt4 }}</label>
    </div>
    <div v-for="(item) in title.fill_blank">
      <h4><span>{{ item.number }}</span>({{ item.score }}分) {{ item.title }}</h4>
      <input v-model="answer[item.number-1].answer[0]" placeholder="请输入你的答案"><label>{{ item.opt4 }}</label>
    </div>
    <div v-for="(item) in title.judgement">
      <h4><span>{{ item.number }}</span>({{ item.score }}分) {{ item.title }}</h4>
      <input v-model="answer[item.number-1].answer[0]" type="radio" value="1"><label>yes</label>
      <input v-model="answer[item.number-1].answer[0]" type="radio" value="0"><label>no</label>
    </div>
    <el-button @click="hadleAnswer()"> 提交</el-button>
    <el-dialog :visible.sync="noFinishShow">
      <h4>还有题目未作答，请确保所有题目已作答后提交！</h4>
      <el-button @click="colse()">确定</el-button>
    </el-dialog>
    <el-dialog :visible.sync="confirmShow">
      <h4>确认提交</h4>
      <el-button @click="handle()">提交</el-button>
    </el-dialog>
  </div>
</template>
<script>
import { studentGetPaper, studentHandlePaper } from '@/api/paper'

export default {
  data() {
    return {
      answer: [],
      title: [],
      noFinishShow: false,
      confirmShow: false,
      param: [],
      hours: 1,
      minutes: 10,
      seconds: 0

    }
  },
  computed: {
    // 初始化数据
    second() {
      return this.num(this.seconds)
    },
    minute() {
      return this.num(this.minutes)
    },
    hour() {
      return this.num(this.hours)
    }
  },
  watch: {
    // 监听数值变化
    second: {
      handler(newVal) {
        this.num(newVal)
      }
    },
    minute: {
      handler(newVal) {
        this.num(newVal)
      }
    },
    hour: {
      handler(newVal) {
        this.num(newVal)
      }
    }
  },
  mounted() {
    this.add()
  },
  created() {
    console.log(this.$route.exam_time)
    this.hours = parseInt(this.$route.query.exam_time / 60)
    this.minutes = this.$route.query.exam_time % 60
    studentGetPaper({ test_id: this.$route.query.test_id }).then(response => {
      console.log(response)
      for (var kind in response.tests) {
        for (var test in response.tests[kind]) {
          this.answer.push({
            number: response.tests[kind][test].number,
            answer: []
          })
        }
      }
      console.log(response)
      this.title = response.tests
      // console.log(this.answer)
      console.log(this.title)
    })
  },
  methods: {
    hadleAnswer() {
      this.confirmShow = true
    },
    colse() {
      this.noFinishShow = false
    },
    handle() {
      for (var item in this.answer) {
        var tmp_answer = ''
        for (var i in this.answer[item].answer) {
          if (this.answer[item].answer[i] == true) {
            if (i == 0) {
              tmp_answer += 'A'
            } else if (i == 1) {
              tmp_answer += 'B'
            } else if (i == 2) {
              tmp_answer += 'C'
            } else if (i == 3) {
              tmp_answer += 'D'
            }
          }
        }
        console.log(tmp_answer)
        if (tmp_answer == '') {
          if (!this.answer[item].answer[0]) {
            this.noFinishShow = true
            console.log('还有题目未作答，请确保所有题目已作答后提交！')
            this.confirmShow = false
            return
          }
          this.param.push({
            number: this.answer[item].number,
            answer: this.answer[item].answer[0]
          })
        } else {
          this.param.push({
            number: this.answer[item].number,
            answer: tmp_answer
          })
        }
      }
      console.log(this.param)
      studentHandlePaper({ test_id: this.$route.query.test_id, s_id: this.$store.getters.id, answers: this.param }).then(response => {
        if (response.code == 200) {
          this.$router.push({ path: '/student/testList', query: { c_id: this.$route.query.c_id }})
        }
        this.param = []
      })
      this.param = []
      this.confirmShow = false
      // console.log(this.answer)
    },
    num(n) {
      return n < 10 ? '0' + n : '' + n
    },
    // 倒计时函数
    add() {
      const time = window.setInterval(() => {
        if (this.hours !== 0 && this.minutes == 0 && this.seconds == 0) {
          this.hours -= 1
          this.minutes = 59
          this.seconds = 59
        } else if (this.hours == 0 && this.minutes !== 0 && this.seconds ==
          0) {
          this.minutes -= 1
          this.seconds = 59
        } else if (this.hours == 0 && this.minutes == 0 && this.seconds ==
          0) {
          this.seconds = 0
          window.clearInterval(time)
        } else if (this.hours !== 0 && this.minutes !== 0 && this.seconds ==
          0) {
          this.minutes -= 1
          this.seconds = 59
        } else {
          this.seconds -= 1
        }
        if (this.hours == 0 && this.minutes == 0 && this.seconds == 0) {
          console.log('要提交试卷了')
        }
      }, 1000)
    }
  }
}
</script>

